<template>
  <div class="mainBody">
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline" id="searchMap">
        <el-form-item label="父菜单id">
          <el-input v-model="formInline.parent_menu_id" placeholder="父菜单id"></el-input>
        </el-form-item>
        <el-form-item label="菜单名">
          <el-input v-model="formInline.alias" placeholder="菜单名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getASpecialPage">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="initialization">初始化</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="prepareForAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <el-table
        :data="menuData"
        ref="multipleTable"
        border
        tooltip-effect="dark"
        style="margin: 0 auto;background: oldlace;"
        @select="handleSelectionChange">
        <el-table-column type="selection" width="40">
        </el-table-column>
        <el-table-column
          label="id"
          width="60">
          <template slot-scope="menuData">{{menuData.row.id}}</template>
        </el-table-column>
        <el-table-column
          label="名字"
          width="120">
          <template slot-scope="menuData">{{menuData.row.alias}}</template>
        </el-table-column>
        <el-table-column
          label="跳转路径"
          width="140">
          <template slot-scope="menuData">{{menuData.row.url}}</template>
        </el-table-column>
        <el-table-column
          label="图标"
          width="200">
          <template slot-scope="menuData">{{menuData.row.icon}}</template>
        </el-table-column>
        <el-table-column
          label="状态"
          width="180">
          <template slot-scope="menuData">{{menuData.row.state}}</template>
        </el-table-column>
        <el-table-column
          label="父菜单id"
          width="80">
          <template slot-scope="menuData">{{menuData.row.parent_menu_id}}</template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="menuData">
            <el-button size="mini" type="primary" @click="prepareForEdit(menuData.row)">编辑</el-button>
            <el-button size="mini" type="danger"@click="handleDelete(menuData.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top:15px;"
        background
        layout="prev, pager, next"
        :current-page.sync="pagination.page"
        :page-size.sync="pagination.size"
        :total="pagination.count"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
<!--    接下来是弹出框部分-->
    <el-dialog
      title="新增菜单"
      :visible.sync="addDialog"
      width="400px"
      :before-close="handleClose">
      <el-form :inline="true" label-position="left" :model="menuItem" label-width="100px">
        <el-form-item label="菜单英文名">
          <el-input v-model="menuItem.name" placeholder="菜单英文名" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="菜单中文名">
          <el-input v-model="menuItem.alias" placeholder="菜单中文名" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="父菜单">
          <el-select v-model="menuItem.parent_menu_id" placeholder="请选择父菜单" style="width: 250px" >
            <el-option v-for="item in menuList" :label="item.alias" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="跳转路径">
          <el-input v-model="menuItem.url" placeholder="跳转路径" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="图标css">
          <el-input v-model="menuItem.icon" placeholder="" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="addMenuItem">新增</el-button>
          <el-button type="danger" @click="addDialog=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      title="编辑菜单"
      :visible.sync="editDialog"
      width="400px"
      :before-close="handleClose">
      <el-form :inline="true" label-position="left" :model="menuItem" label-width="100px">
        <el-form-item label="菜单英文名">
          <el-input v-model="menuItem.name" placeholder="菜单英文名" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="菜单中文名">
          <el-input v-model="menuItem.alias" placeholder="菜单中文名" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="父菜单">
          <el-select v-model="menuItem.parent_menu_id" placeholder="请选择父菜单" style="width: 250px" >
            <el-option v-for="item in menuList" :label="item.alias" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="menuItem.state" placeholder="menuItem.state" style="width: 250px" >
            <el-option label="ENABLE" value="ENABLE" ></el-option>
            <el-option label="DISABLE" value="DISABLE" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="跳转路径">
          <el-input v-model="menuItem.url" placeholder="跳转路径" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="图标css">
          <el-input v-model="menuItem.icon" placeholder="" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="editMenuItem">修改</el-button>
          <el-button type="danger" @click="editDialog=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import qs from 'qs'
    export default {
      name: "MenuManager",
      data() {
        return {
          menuList:{},
          addDialog:false,
          editDialog:false,
          menuData:null,
          queryType:1,
          pagination: {
            page: 1,
            size: 8,
            count: 0,
          },
          menuItem:{
            id:'',
            alias:'',
            icon:'',
            url:'',
            name:'',
            parent_menu_id:'',
            state:''
          },
          formInline: {
            parent_menu_id: '',
            alias: ''
          },
        }
      },
      created() {
        this.getAPage()
      },
      methods: {
        prepareForAdd(){
          this.menuItem={};
          this.addDialog=true;
          this.getMenuList()
        },
        prepareForEdit(entity){
          this.menuItem=entity;
          this.editDialog=true;
          this.getMenuList();
        },
        editMenuItem(){
          this.$axios.post('/menu/editMenuItem',qs.stringify(this.menuItem))
            .then(res=>{
              this.$message({
                message:res.data.msg,
                duration: 3000
              })
              this.initialization()
              this.menuItem=null;
            })
            .catch(err=>{
              this.$message({
                message:'获取数据错误',
                type: 'error',
                duration: 3000
              })
            })
          this.editDialog=false;
          this.initialization();
        },
        addMenuItem(){
          this.$axios.post('/menu/addMenuItem',qs.stringify(this.menuItem))
            .then(res=>{
              this.$message({
                message:res.data.msg,
                duration: 3000
              })
              this.initialization()
              this.menuItem=null;
            })
            .catch(err=>{
              this.$message({
                message:'获取数据错误',
                type: 'error',
                duration: 3000
              })
            })
          this.addDialog=false
          this.initialization();
        },
        getMenuList(){
          this.$axios.post('/menu/getMenuList',)
            .then(res=>{
              this.menuList = res.data.data;

            })
            .catch(err=>{
              this.$message({
                message:'获取数据错误',
                type: 'error',
                duration: 3000
              })
            })
        },
        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {});
        },
        initialization(){
          this.queryType=1;
          this.formInline.parent_menu_id='';
          this.formInline.alias='';
          this.pagination.page=1;
          this.getAPage();
        },
        getAPage(){
          if(this.queryType!=1){
            this.queryType=1;
            this.pagination.page=1;
          }
          this.$axios.post('/menu/getAPage',qs.stringify(this.pagination))
            .then(res=>{
            this.menuData = res.data.result;
            this.pagination.count = res.data.count;
          })
            .catch(err=>{
              this.$message({
                message:'获取数据错误',
                type: 'error',
                duration: 3000
              })
            })
        },
        handleCurrentChange(page) {
          this.pagination.page = page;
          if(this.queryType==1)
            this.getAPage();
          if(this.queryType==2)
            this.getASpecialPage()
        },
        handleDelete(id){
          this.$axios.post('/menu/deleteMenuItem',qs.stringify({
            menuItemId:id
          }))
            .then(res=>{
              this.$message({
                message:res.data.msg,
                duration: 3000
              })
              this.initialization()
            })
            .catch(err=>{
              this.$message({
                message:'获取数据错误',
                type: 'error',
                duration: 3000
              })
            })
          this.initialization()
        },
        getASpecialPage() {
          if(this.queryType!=2){
            this.queryType=2;
            this.pagination.page=1;
          }
          this.$axios.post('/menu/getASpecialPage',qs.stringify({
            parent_menu_id: this.formInline.parent_menu_id,
            alias:this.formInline.alias,
            page:this.pagination.page,
            size:this.pagination.size
          }))
            .then(res=>{
              console.log(res.data.result);
              this.menuData = res.data.result;
              this.pagination.count = res.data.count;
            })
            .catch(err=>{
              this.$message({
                message:'获取数据错误',
                type: 'error',
                duration: 3000
              })
            })
        }
      },
    }
</script>

<style scoped>
  .mainBody{
    width: 100%;
    background: #ffffff;

  }
  #searchMap{
    width: 800px;
    padding-top: 15px;
    padding-left: 40px;
  }
</style>
